<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-button class='base_btn' @click="orderChangeStatus('2')" v-if='status == 5' size='mini' type='primary'>订单对账</el-button>
    <el-button class='base_btn' :disabled='true' v-if='status == 1' size='mini' type='danager'>已标记对账</el-button>
    <el-row class="base_info">
        <el-col :span='3'><span>结算时间:</span></el-col>
        <el-col :span='9'><p>{{order_info.close_time}}</p></el-col>
        <el-col :span='3'><span>订单类型:</span></el-col>
        <el-col :span='9'>
            <p v-if='order_info.type==1'>爆品商品</p>
             <p v-if='order_info.type==5'>现金券</p>
             <p v-if='order_info.type==10'>拼团</p>
             <p v-if='order_info.type==15'>会员专享商品</p>
             <p v-if='order_info.type==20'>满减券</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
           <el-col :span='3'><span>所属小店:</span></el-col>
        <el-col :span='9'>
          <p v-if='detail.shop_name'>{{detail.sellerName}}</p>
          <p v-else>---</p>
          </el-col>
        <el-col :span='3'><span>支付单号:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.orderNo'>{{order_info.orderNo}}</p>
          <p v-else>---</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
            <el-col :span='3'><span>收支流水号:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.paySn'>{{order_info.paySn}}</p>
          <p v-else>---</p>
          </el-col>
         <el-col :span='3'><span>付款账号:</span></el-col>
        <el-col :span='9'>
           <p v-if='order_info.username'>{{order_info.username}}</p>
          <p v-else>---</p>
        </el-col>
    </el-row>

     <el-row class="base_info">
       <el-col :span='3'><span>支付渠道:</span></el-col>
        <el-col :span='9'>
          <p>{{detail.payMethodName}}</p>
        </el-col>
        <el-col :span='3'><span>订单收入:</span></el-col>
        <el-col :span='9'>
           <p v-if='order_info.amount'>¥ {{order_info.amount}}</p>
          <p v-else>---</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>实际收入</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.amount'>¥ {{detail.amount}}</p>
           <p v-else>---</p>
        </el-col>
         <!-- <el-col :span='3'><span>收入金额:</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.actual_amount'>{{detail.actual_amount}}</p>
           <p v-else>---</p>
        </el-col> -->
    </el-row>

    <p class="title">| 订单信息</p>
    <div class="order_infomation">
         <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="商品ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop='title'></el-table-column>
      <el-table-column label="商品单价" prop='price'></el-table-column>
      <el-table-column label="购买数量" prop='quantity'></el-table-column>
      <el-table-column label="订单金额">
          ¥ {{order_info.total_amount}}
      </el-table-column>
      <el-table-column label="实付金额" >
          ¥ {{detail.actual_amount}}
      </el-table-column>
    </el-table>

      <div class="duizhang_bottom">
        <el-row v-show="order_info.vip_discount != 100">
            <p v-if='order_info.vip_discount_price' class="discount">- ¥{{order_info.vip_discount_price}}</p>
            <p class="discount" v-else>- ¥0.0</p>
            <p class="discount" v-if='order_info.vip_discount'>{{order_info.vip_discount / 10}}折</p>
            <p class="discount" v-else>0折</p>
            <p class="discount">会员折扣</p>
        </el-row>
        <el-row >
          <p v-if='order_info.red_packet_discount_price' class="discount">- ¥{{order_info.red_packet_discount_price}}</p>
          <p class="discount" v-else>- ¥0.0</p>
          <p v-if='order_info.red_packet_discount' class="discount">{{order_info.red_packet_discount}}%</p>
          <p class="discount"  v-else>0%</p>
          <p class="discount">红包抵扣</p>
        </el-row>
        <el-row>
          <p  v-if ='order_info.actual_amount' class="actual_discount">¥ {{detail.actual_amount}}</p>
          <p  v-else class="actual_discount">¥ 0.0</p>
          <p class="actual_discount">实付金额</p>
        </el-row>
      </div>
    </div>
    <div class="class_btn">
       <el-button size ='mini' type="primary" @click="handleCancel">确定</el-button>
       <el-button size ='mini' type="danager" @click="handleCancel">取消</el-button>
    </div>

  </div>
</template>

<script>
import {transactionDetail} from '@/api/finance'
import { orderDetail } from "@/api/order"
export default {
    name: 'record_detail',
  props: [ 'visible', 'currentId','status'],
   data () {
    return {
      detail: {},
      order_info:{},
      username:{},
      tableData:[],
    }
  },
  watch: {
    visible (newValue) {
      if(newValue){
        console.log('显示值改变')
        this.getRecordDetailData()
      }
    }
  },
  methods:{
    orderChangeStatu(){
      console.log('修改状态')

    },
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
          this.$emit('func')
    },
    orderChangeStatus(status){
       this.getshopReconciliationData(status)
    },
    async getshopReconciliationData(status){
      let res =await shopReconciliation({'id':this.currentId,'type':status})
      if(res.code === 10000){
        this.$message.success('修改状态成功')
        this.handleCancel()
      }else{
        this.$message.error(res.message)
      }
    },
    async getRecordDetailData(){
      console.log(this.currentId)
      let res = await  orderDetail(this.currentId);
      if(res.code === 10000){
        this.detail = res.data
        this.order_info = res.data
        this.username = res.data.username
        this.tableData = []
        if(this.detail.order_product){
          this.tableData.push(this.detail.order_product)
        }


      }else{
        this.$message.error(res.message)
      }

    }
  }
};
</script>


<style scoped lang="scss">
 .detail_content{
     padding: 20px;
     .title{
         font-size: 16px;
     }
     .base_btn{
       position:fixed;
      //  float: right;
       margin: 0 0 30px 80%;
     }
     .base_info{
         margin:15px 20px 20px;
         span{
             font-size:12px;
             color: #999999;
         }

         p{
             font-size: 13px;
             color: #333333;
         }
     }
     .order_infomation{
       margin-top: 16px;
     }

     .class_btn{
       margin-top: 30px;
       text-align: center;
     }
     .duizhang_bottom{
       border-bottom:  1px solid #e6e6e6;
     }
     .discount{
       float: right;
       margin : 10px 20px;
       color: #f4222d;
       width: 100px;
     }
     .actual_discount{
       float: right;
       width: 170px;
       margin: 10px 20px;
     }
 }
</style>

